<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="component/heard :: head"></head>
<body>
<nav th:include="component/nav :: nav"></nav>

<div th:fragment="flow">
    <script src="/js/go.js"></script>
    <div id="myDiagramDiv" style=" width:100%; height:80px"></div>
    <script th:inline="javascript">
        function init() {
            // 生成器
            const $ = go.GraphObject.make;

            // 定义容器，myDiagramDiv 为容器 id
            diagram = $(go.Diagram, 'myDiagramDiv', {

                layout: $(go.TreeLayout,  // the layout for the entire diagram
                    {
                        angle: 0,
                        arrangement: go.TreeLayout.ArrangementHorizontal,
                        isRealtime: false
                    }),
                allowMove: false,
                allowHorizontalScroll: false,
                allowVerticalScroll: false,
                allowSelect: false,
            });

            // 节点模板，描述了如何构造每个节点
            diagram.nodeTemplate = $(go.Node, "Auto", // 框自动适应文本
                $(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
                $(go.TextBlock, {margin: 5}, new go.Binding("text", "text"))
            );

            // 定义集合，存储实线、虚线模板
            const templmap = new go.Map()
            const color = '#000'

            // 默认连线模板
            const defaultTemplate = $(
                go.Link,
                $(go.Shape, {stroke: color, strokeWidth: 1}),
                $(go.Shape, {toArrow: 'Standard', fill: color, stroke: color, strokeWidth: 1})
            )

            // 虚线连线模板，关键属性：strokeDashArray: [6, 3]
            const dashedTemplate = $(
                go.Link,
                // name: 'dashedLink'，后面动画用到
                $(go.Shape, {name: 'dashedLink', stroke: color, strokeWidth: 1, strokeDashArray: [6, 3]}),
                $(go.Shape, {toArrow: 'Standard', fill: color, stroke: color, strokeWidth: 1})
            )

            templmap.add('', defaultTemplate)
            // dashed 为名称，描述时用属性 category: 'dashed' 指定
            templmap.add('dashed', dashedTemplate)

            diagram.linkTemplateMap = templmap

        }

        function animation() {
            const animation = new go.Animation();
            // 虚线动画
            diagram.links.each((link) => {
                const dashedLink = link.findObject("dashedLink");
                if (dashedLink) {
                    animation.add(dashedLink, "strokeDashOffset", 10, 0)
                }
            });

            animation.easing = go.Animation.EaseLinear;
            // Run indefinitely
            animation.runCount = Infinity;
            animation.start();
        }

        function load() {
            let ndata = [[${flow?.flow?.getNodeDataArrayJsonStr()}]];
            let ldata = [[${flow?.flow?.getLinkDataArrayJsonStr()}]];
            let model = {
                "class": "go.GraphLinksModel",
                "copiesArrays": true,
                "copiesArrayObjects": true,
                "nodeDataArray": JSON.parse(ndata),
                "linkDataArray": JSON.parse(ldata)
            }
            diagram.model = go.Model.fromJson(JSON.stringify(model));
        }

        $(function () {
            init()
            load()
            animation()
        })

    </script>
</div>
</body>
</html>